<template>
  <a-modal
    :width='modalWidth'
    :visible='visible'
    :title='title'
    @ok='handleSubmit'
    @cancel='close'
    :maskClosable='false'
    cancelText='关闭'
    style='margin-top: -70px'
    wrapClassName='ant-modal-cust-warp'>

    <a-row :gutter='10' style='background-color: #ececec; padding: 10px; margin: -10px'>
      <a-col :md='7' :sm='24'>
        <a-card :bordered='false'>
          <!--组织机构-->
          <a-directory-tree
            selectable
            :selectedKeys='selectedKeys'
            :checkStrictly='true'
            @select='this.onSelect'
            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
            :treeData='departTree'
          />
        </a-card>
      </a-col>
      <a-col :md='17' :sm='24'>
        <a-card :bordered='false'>
          用户账号:
          <a-input-search
            :style="{width:'150px',marginBottom:'15px'}"
            placeholder='请输入用户账号'
            v-model='queryParam.username'
            @search='onSearch'
          ></a-input-search>
          <a-button @click='searchReset(1)' style='margin-left: 20px' icon='redo'>重置</a-button>
          <!--用户列表-->
          <a-table
            ref='table'
            :scroll='scrollTrigger'
            size='middle'
            rowKey='id'
            :columns='columns'
            :dataSource='dataSource'
            :pagination='ipagination'
            :loading='loading'
            :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
            @change='handleTableChange'>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { filterObj } from '@/utils/util'
import { queryDepartTreeList, getUserList, queryUserByDepId, queryUserRoleMap } from '@/api/api'

export default {
  name: 'JSelectUserByDepRelationshipModal',
  components: {},
  props: ['modalWidth'],
  data() {
    return {
      queryParam: {
        username: ''
      },
      columns: [
        {
          title: '用户账号',
          align: 'center',
          dataIndex: 'username'
        },
        {
          title: '真实姓名',
          align: 'center',
          dataIndex: 'realname'
        },
        {
          title: '角色名称',
          align: 'center',
          dataIndex: 'roleName'
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex',
          customRender: function(text) {
            if (text === 1) {
              return '男'
            } else if (text === 2) {
              return '女'
            } else {
              return text
            }
          }
        },
        {
          title: '手机号码',
          align: 'center',
          dataIndex: 'phone'
        },
        {
          title: '邮箱',
          align: 'center',
          dataIndex: 'email'
        }
      ],
      scrollTrigger: {},
      dataSource: [],
      selectedKeys: [],
      userNameArr: [],
      departName: '',
      userRolesMap: {},
      title: '根据部门选择用户',
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      selectedRowKeys: [],
      selectedRows: [],
      departTree: [],
      visible: false,
      form: this.$form.createForm(this),
      loading: false
    }
  },
  created() {
    // 该方法触发屏幕自适应
    this.resetScreenSize()
    this.queryUserRoleMap()
  },
  methods: {
    loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      //如果左侧已经选了某个部门，则之后都调用queryUserByDepId来查询数据，否则调用getUserList查询所有部门数据
      if (this.selectedKeys[0] != null) {
        this.queryUserByDepId(this.selectedKeys[0]) // 调用方法根据选选择的id查询用户信息
      } else {
        this.loading = true
        let params = this.getQueryParams()//查询条件
        getUserList(params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.assignRoleName(this.dataSource)
            this.ipagination.total = res.result.total
          }
          this.loading = false
        })
      }
    },
    queryUserRoleMap() {
      queryUserRoleMap().then((res) => {
        if (res.success) {
          this.userRolesMap = res.result
          this.loadData()
        }
      })
    },
    // 触发屏幕自适应
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.scrollTrigger = { x: 800 }
      } else {
        this.scrollTrigger = {}
      }
    },
    showModal() {
      this.visible = true
      this.assignRoleName(this.dataSource)
      this.queryDepartTree()
      this.form.resetFields()
      this.loadData(1)
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    getQueryField() {
      let str = 'id,'
      for (let a = 0; a < this.columns.length; a++) {
        str += ',' + this.columns[a].dataIndex
      }
      return str
    },
    searchReset(num) {
      let that = this

      that.selectedRowKeys = []
      that.userNameArr = []
      that.selectedKeys = []
      if (num !== 0) {
        that.queryParam = {}
        that.loadData(1)
      }
    },
    close() {
      this.searchReset(0)
      this.visible = false
      this.ipagination.pageSize = 10
    },
    handleTableChange(pagination, filters, sorter) {
      //TODO 筛选
      if(isNaN(pagination.pageSize)){
        pagination.pageSize = Number(pagination.pageSizeOptions[0])
      }
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
    handleSubmit() {
      let that = this
      if (that.selectedRowKeys.length < 1) {
        that.$message.error('请选择一条数据!')
        return
      } else {
        for (let i = 0, len = that.selectedRowKeys.length; i < len; i++) {
          that.getUserNames(that.selectedRowKeys[i])
          that.userNameArr.push(that.selectedRowKeys[i])
        }
        that.$emit('ok', that.userNameArr.join(','))
        that.close()
      }
    },
    // 遍历匹配,获取用户真实姓名
    getUserNames(rowId) {
      let dataSource = this.dataSource
      for (let i = 0, len = dataSource.length; i < len; i++) {
        if (rowId === dataSource[i].id) {
          /*这里把传给后端的id换成username字段   username*/
          this.userNameArr.push(dataSource[i].realname, dataSource[i].username)
        }
      }
    },
    // 点击树节点,筛选出对应的用户
    onSelect(selectedKeys) {
      if (selectedKeys[0] != null) {
        this.queryUserByDepId(selectedKeys) // 调用方法根据选选择的id查询用户信息
        if (this.selectedKeys[0] !== selectedKeys[0]) {
          this.selectedKeys = [selectedKeys[0]]
        }
        this.ipagination.current = 1
      }

    },
    onSelectChange(selectedRowKeys, selectionRows) {
      //如果选择的个数超过一个，清空之前的 选中最后选择的这个
      if (selectedRowKeys.length > 1) {
        this.selectedRowKeys = []
        this.selectionRows = []
        this.selectedRowKeys.push(selectedRowKeys[selectedRowKeys.length - 1])
        this.selectionRows.push(selectionRows[selectionRows.length - 1])
      } else {
        this.selectedRowKeys = selectedRowKeys
        this.selectionRows = selectionRows
      }
    },
    onSearch() {
      this.loadData(1)
    },
    // 根据选择的id来查询用户信息
    queryUserByDepId(selectedKeys) {
      let params = this.getQueryParams()//查询条件
      params.id = selectedKeys.toString()

      queryUserByDepId(params).then((res) => {
        if (res.success) {
          this.dataSource = res.result
          this.ipagination.total = res.result.length
          this.assignRoleName(this.dataSource)
        }
      })
    },
    // 传入用户id,找到匹配的角色名称
    queryUserRole(userId) {
      let map = this.userRolesMap
      let roleName = []
      for (var key in map) {
        if (userId === key) {
          roleName.push(map[key])
        }
      }
      return roleName.join(',')
    },
    queryDepartTree() {
      queryDepartTreeList().then((res) => {
        if (res.success) {
          this.departTree = res.result
        }
      })
    },
    // 为角色名称赋值
    assignRoleName(data) {
      let userId = ''
      let role = ''
      for (let i = 0, length = data.length; i < length; i++) {
        userId = this.dataSource[i].id
        role = this.queryUserRole(userId)
        this.dataSource[i].roleName = role
      }
    },
    modalFormOk() {
      this.loadData()
    }
  }
}
</script>

<style scoped>
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}
</style>